<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <!--	<link rel="stylesheet" href="./css/layui.css" />-->
    <link rel="stylesheet" th:href="@{/static/component/layui2923/css/layui.css}">
    <link rel="stylesheet" th:href="@{/static/component/layui2923/css/newCss.css}">
    <!--	<link rel="stylesheet" href="./css/newCss.css" />-->
</head>

<body>
<div class="new_content">
    <!-- header -->
    <div class="new_headerbox">
        <!-- left -->
        <div class="new_header_left">
            <div class="layui-form">
                <div class="">
                    <div class="">
                        <label class="">年度</label>
                        <div class="layui-input-inline">
                            <!--								<input type="text" class="layui-input" id="ID-laydate-demo" placeholder="请选择日期">-->
                            <input autocomplete="off" class="layui-input" lay-verify="evaluationDate"
                                   style="padding-right: 0"
                                   name="evaluationDate" id="evaluationDate" placeholder="请选择对应年份" type="text">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- right -->
        <div class="new_header_right">
            占比:<span id="percentall">23项</span>
        </div>
        <div class="new_header_right">
            全环节项目:<span id="countall">22项</span>
        </div>
    </div>
    <!-- 主体部分 -->
    <div class="new_main">
        <!-- 主体部分 上半部分 可研环节 -->
        <div class="new_list heght1">
            <div class="new_list_title"><span></span>
                <div class="new_list_Tvalue">可研环节</div>
            </div>
            <div class="new_listUl">
                <div class="new_listLi gradient1">
                    <img src="./static/img/bcNimg1.png" class="new_listBcimg">
                    <div class="NewlinkTitle">项目数量</div>
                    <div class="NewlinkVlue" id="countky">123</div>
                    <div class="NewlinkUnit">项</div>
                </div>
                <div class="new_listLi gradient1">
                    <img src="/static/img/bcNimg1.png" class="new_listBcimg">
                    <div class="NewlinkTitle">项目总金额</div>
                    <div class="NewlinkVlue" id="moneyky">43234</div>
                    <div class="NewlinkUnit">亿元</div>
                </div>
            </div>
            <div id="kyList">
                <div class="NewItemListbox">
                    <div class="NewItemList">
                        <div class="NewItemcolorBlock ColorBlock1"></div>
                        <div class="NewItemTitle">基建类项目:</div>
                        <div class="NewItemValue marLeft5"><span>23</span> 项</div>
                        <div class="NewItemValue marLeft10"><span>0.321</span> 亿元</div>
                        <div class="NewItemBatch">批次：4</div>
                    </div>
                </div>
                <div class="NewItemListbox">
                    <div class="NewItemList">
                        <div class="NewItemcolorBlock ColorBlock1"></div>
                        <div class="NewItemTitle">业矿类项目:</div>
                        <div class="NewItemValue marLeft5"><span>23</span> 项</div>
                        <div class="NewItemValue marLeft10"><span>0.321</span> 亿元</div>
                        <div class="NewItemBatch">批次：4</div>
                    </div>
                </div>
                <div class="NewItemListbox">
                    <div class="NewItemList">
                        <div class="NewItemcolorBlock ColorBlock1"></div>
                        <div class="NewItemTitle">技改类项目:</div>
                        <div class="NewItemValue marLeft5"><span>23</span> 项</div>
                        <div class="NewItemValue marLeft10"><span>0.321</span> 亿元</div>
                        <div class="NewItemBatch">批次：4</div>
                    </div>
                </div>
                <div class="NewItemListbox">
                    <div class="NewItemList">
                        <div class="NewItemcolorBlock ColorBlock1"></div>
                        <div class="NewItemTitle">大修类项目:</div>
                        <div class="NewItemValue marLeft5"><span>23</span> 项</div>
                        <div class="NewItemValue marLeft10"><span>0.321</span> 亿元</div>
                        <div class="NewItemBatch">批次：4</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 主体部分 上半部分 初设环节 -->
        <div class="new_list heght1">
            <div class="new_list_title"><span></span>
                <div class="new_list_Tvalue">初设环节</div>
            </div>
            <div class="new_listUl">
                <div class="new_listLi gradient2">
                    <img src="/static/img/bcNimg1.png" class="new_listBcimg">
                    <div class="NewlinkTitle">项目数量</div>
                    <div class="NewlinkVlue" id="countcs">123</div>
                    <div class="NewlinkUnit">项</div>
                </div>
                <div class="new_listLi gradient2">
                    <img src="/static/img/bcNimg1.png" class="new_listBcimg">
                    <div class="NewlinkTitle">项目总金额</div>
                    <div class="NewlinkVlue" id="moneycs">43234</div>
                    <div class="NewlinkUnit">亿元</div>
                </div>
            </div>

            <div id="csList">
                <div class="NewItemListbox">
                    <div class="NewItemList">
                        <div class="NewItemcolorBlock ColorBlock2"></div>
                        <div class="NewItemTitle">基建类项目:</div>
                        <div class="NewItemValue marLeft5"><span>23</span> 项</div>
                        <div class="NewItemValue marLeft10"><span>0.321</span> 亿元</div>
                        <div class="NewItemBatch">批次：4</div>
                    </div>
                </div>
                <div class="NewItemListbox">
                    <div class="NewItemList">
                        <div class="NewItemcolorBlock ColorBlock2"></div>
                        <div class="NewItemTitle">业矿类项目:</div>
                        <div class="NewItemValue marLeft5"><span>23</span> 项</div>
                        <div class="NewItemValue marLeft10"><span>0.321</span> 亿元</div>
                        <div class="NewItemBatch">批次：4</div>
                    </div>
                </div>
                <div class="NewItemListbox">
                    <div class="NewItemList">
                        <div class="NewItemcolorBlock ColorBlock2"></div>
                        <div class="NewItemTitle">技改类项目:</div>
                        <div class="NewItemValue marLeft5"><span>23</span> 项</div>
                        <div class="NewItemValue marLeft10"><span>0.321</span> 亿元</div>
                        <div class="NewItemBatch">批次：4</div>
                    </div>
                </div>
                <div class="NewItemListbox">
                    <div class="NewItemList">
                        <div class="NewItemcolorBlock ColorBlock2"></div>
                        <div class="NewItemTitle">大修类项目:</div>
                        <div class="NewItemValue marLeft5"><span>23</span> 项</div>
                        <div class="NewItemValue marLeft10"><span>0.321</span> 亿元</div>
                        <div class="NewItemBatch">批次：4</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 主体部分 上半部分 结算环节 -->
        <div class="new_list heght1">
            <div class="new_list_title"><span></span>
                <div class="new_list_Tvalue">结算环节</div>
            </div>
            <div class="new_listUl">
                <div class="new_listLi gradient3">
                    <img src="/static/img/bcNimg1.png" class="new_listBcimg">
                    <div class="NewlinkTitle">项目数量</div>
                    <div class="NewlinkVlue" id="countjs">123</div>
                    <div class="NewlinkUnit">项</div>
                </div>
                <div class="new_listLi gradient3">
                    <img src="/static/img/bcNimg1.png" class="new_listBcimg">
                    <div class="NewlinkTitle">项目总金额</div>
                    <div class="NewlinkVlue" id="moneyjs">43234</div>
                    <div class="NewlinkUnit">亿元</div>
                </div>
            </div>
            <div id="jsList">
                <div class="NewItemListbox">
                    <div class="NewItemList">
                        <div class="NewItemcolorBlock ColorBlock3"></div>
                        <div class="NewItemTitle">基建类项目:</div>
                        <div class="NewItemValue marLeft5"><span>23</span> 项</div>
                        <div class="NewItemValue marLeft10"><span>0.321</span> 亿元</div>
                        <div class="NewItemBatch">批次：4</div>
                    </div>
                </div>
                <div class="NewItemListbox">
                    <div class="NewItemList">
                        <div class="NewItemcolorBlock ColorBlock3"></div>
                        <div class="NewItemTitle">业矿类项目:</div>
                        <div class="NewItemValue marLeft5"><span>23</span> 项</div>
                        <div class="NewItemValue marLeft10"><span>0.321</span> 亿元</div>
                        <div class="NewItemBatch">批次：4</div>
                    </div>
                </div>
                <div class="NewItemListbox">
                    <div class="NewItemList">
                        <div class="NewItemcolorBlock ColorBlock3"></div>
                        <div class="NewItemTitle">技改类项目:</div>
                        <div class="NewItemValue marLeft5"><span>23</span> 项</div>
                        <div class="NewItemValue marLeft10"><span>0.321</span> 亿元</div>
                        <div class="NewItemBatch">批次：4</div>
                    </div>
                </div>
                <div class="NewItemListbox">
                    <div class="NewItemList">
                        <div class="NewItemcolorBlock ColorBlock3"></div>
                        <div class="NewItemTitle">大修类项目:</div>
                        <div class="NewItemValue marLeft5"><span>23</span> 项</div>
                        <div class="NewItemValue marLeft10"><span>0.321</span> 亿元</div>
                        <div class="NewItemBatch">批次：4</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 主体部分 下半部分 可研与初设差异分析 -->
        <div class="new_list heght2">
            <div class="new_list_title"><span></span>
                <div class="new_list_Tvalue">可研与初设差异分析</div>
            </div>
            <div class="NewAnalysisUl" id="kycompareList">
                <div class="NewAnalysis_li ColorBlock4">
                    <div class="NewAnalysisbox">
                        <div class="NewAnalysisTitle">项目金额差异</div>
                        <div class="NewAnalysisValue">(10%以上)</div>
                    </div>
                    <div class="NewAnalysisValueUl">
                        <div class="NewAnalysisValueLi">基建：5项</div>
                        <div class="NewAnalysisValueLi">业矿：5项</div>
                        <div class="NewAnalysisValueLi">技改：5项</div>
                        <div class="NewAnalysisValueLi">大修：5项</div>
                    </div>
                </div>
                <div class="NewAnalysis_li ColorBlock4">
                    <div class="NewAnalysisbox">
                        <div class="NewAnalysisTitle">项目金额差异</div>
                        <div class="NewAnalysisValue">(10%以上)</div>
                    </div>
                    <div class="NewAnalysisValueUl">
                        <div class="NewAnalysisValueLi">基建：5项</div>
                        <div class="NewAnalysisValueLi">业矿：5项</div>
                        <div class="NewAnalysisValueLi">技改：5项</div>
                        <div class="NewAnalysisValueLi">大修：5项</div>
                    </div>
                </div>
                <div class="NewAnalysis_li ColorBlock4">
                    <div class="NewAnalysisbox">
                        <div class="NewAnalysisTitle">项目金额差异</div>
                        <div class="NewAnalysisValue">(10%以上)</div>
                    </div>
                    <div class="NewAnalysisValueUl">
                        <div class="NewAnalysisValueLi">基建：5项</div>
                        <div class="NewAnalysisValueLi">业矿：5项</div>
                        <div class="NewAnalysisValueLi">技改：5项</div>
                        <div class="NewAnalysisValueLi">大修：5项</div>
                    </div>
                </div>
                <div class="NewAnalysis_li ColorBlock4">
                    <div class="NewAnalysisbox">
                        <div class="NewAnalysisTitle">项目金额差异</div>
                        <div class="NewAnalysisValue">(10%以上)</div>
                    </div>
                    <div class="NewAnalysisValueUl">
                        <div class="NewAnalysisValueLi">基建：5项</div>
                        <div class="NewAnalysisValueLi">业矿：5项</div>
                        <div class="NewAnalysisValueLi">技改：5项</div>
                        <div class="NewAnalysisValueLi">大修：5项</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 主体部分 下半部分 初设与结算差异分析 -->
        <div class="new_list heght2">
            <div class="new_list_title"><span></span>
                <div class="new_list_Tvalue">初设与结算差异分析</div>
            </div>
            <div class="NewAnalysisUl" id="cscompareList">
                <div class="NewAnalysis_li ColorBlock5">
                    <div class="NewAnalysisbox">
                        <div class="NewAnalysisTitle">项目金额差异</div>
                        <div class="NewAnalysisValue">(10%以上)</div>
                    </div>
                    <div class="NewAnalysisValueUl">
                        <div class="NewAnalysisValueLi">基建：5项</div>
                        <div class="NewAnalysisValueLi">业矿：5项</div>
                        <div class="NewAnalysisValueLi">技改：5项</div>
                        <div class="NewAnalysisValueLi">大修：5项</div>
                    </div>
                </div>
                <div class="NewAnalysis_li ColorBlock5">
                    <div class="NewAnalysisbox">
                        <div class="NewAnalysisTitle">项目金额差异</div>
                        <div class="NewAnalysisValue">(10%以上)</div>
                    </div>
                    <div class="NewAnalysisValueUl">
                        <div class="NewAnalysisValueLi">基建：5项</div>
                        <div class="NewAnalysisValueLi">业矿：5项</div>
                        <div class="NewAnalysisValueLi">技改：5项</div>
                        <div class="NewAnalysisValueLi">大修：5项</div>
                    </div>
                </div>
                <div class="NewAnalysis_li ColorBlock5">
                    <div class="NewAnalysisbox">
                        <div class="NewAnalysisTitle">项目金额差异</div>
                        <div class="NewAnalysisValue">(10%以上)</div>
                    </div>
                    <div class="NewAnalysisValueUl">
                        <div class="NewAnalysisValueLi">基建：5项</div>
                        <div class="NewAnalysisValueLi">业矿：5项</div>
                        <div class="NewAnalysisValueLi">技改：5项</div>
                        <div class="NewAnalysisValueLi">大修：5项</div>
                    </div>
                </div>
                <div class="NewAnalysis_li ColorBlock5">
                    <div class="NewAnalysisbox">
                        <div class="NewAnalysisTitle">项目金额差异</div>
                        <div class="NewAnalysisValue">(10%以上)</div>
                    </div>
                    <div class="NewAnalysisValueUl">
                        <div class="NewAnalysisValueLi">基建：5项</div>
                        <div class="NewAnalysisValueLi">业矿：5项</div>
                        <div class="NewAnalysisValueLi">技改：5项</div>
                        <div class="NewAnalysisValueLi">大修：5项</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 主体部分 下半部分 可研与结算差异分析 -->
        <div class="new_list heght2">
            <div class="new_list_title"><span></span>
                <div class="new_list_Tvalue">可研与结算差异分析</div>
            </div>
            <div class="NewAnalysisUl" id="jscompareList">
                <div class="NewAnalysis_li ColorBlock6">
                    <div class="NewAnalysisbox">
                        <div class="NewAnalysisTitle">项目金额差异</div>
                        <div class="NewAnalysisValue">(10%以上)</div>
                    </div>
                    <div class="NewAnalysisValueUl">
                        <div class="NewAnalysisValueLi">基建：5项</div>
                        <div class="NewAnalysisValueLi">业矿：5项</div>
                        <div class="NewAnalysisValueLi">技改：5项</div>
                        <div class="NewAnalysisValueLi">大修：5项</div>
                    </div>
                </div>
                <div class="NewAnalysis_li ColorBlock6">
                    <div class="NewAnalysisbox">
                        <div class="NewAnalysisTitle">项目金额差异</div>
                        <div class="NewAnalysisValue">(10%以上)</div>
                    </div>
                    <div class="NewAnalysisValueUl">
                        <div class="NewAnalysisValueLi">基建：5项</div>
                        <div class="NewAnalysisValueLi">业矿：5项</div>
                        <div class="NewAnalysisValueLi">技改：5项</div>
                        <div class="NewAnalysisValueLi">大修：5项</div>
                    </div>
                </div>
                <div class="NewAnalysis_li ColorBlock6">
                    <div class="NewAnalysisbox">
                        <div class="NewAnalysisTitle">项目金额差异</div>
                        <div class="NewAnalysisValue">(10%以上)</div>
                    </div>
                    <div class="NewAnalysisValueUl">
                        <div class="NewAnalysisValueLi">基建：5项</div>
                        <div class="NewAnalysisValueLi">业矿：5项</div>
                        <div class="NewAnalysisValueLi">技改：5项</div>
                        <div class="NewAnalysisValueLi">大修：5项</div>
                    </div>
                </div>
                <div class="NewAnalysis_li ColorBlock6">
                    <div class="NewAnalysisbox">
                        <div class="NewAnalysisTitle">项目金额差异</div>
                        <div class="NewAnalysisValue">(10%以上)</div>
                    </div>
                    <div class="NewAnalysisValueUl">
                        <div class="NewAnalysisValueLi">基建：5项</div>
                        <div class="NewAnalysisValueLi">业矿：5项</div>
                        <div class="NewAnalysisValueLi">技改：5项</div>
                        <div class="NewAnalysisValueLi">大修：5项</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--	<script src="./js/layui.js" type="text/javascript"></script>-->
<!--	<script src="./js/jquery.min.js" type="text/javascript"></script>-->
<script th:src="@{/static/component/layui2923/layui.js}"></script>
<script th:src="@{/static/component/jquery.min.js}"></script>
<script> var rootPath = "[[${rootPath}]]";</script>
<script th:inline="javascript" type="text/javascript">
    layui.use(['jquery', 'layer', 'laydate'], function () {
        var laydate = layui.laydate;
        var BASE_URL = rootPath + "/BigScreenController/";
        // 获取去年的年份
        var lastYear = new Date().getFullYear() - 1;

        performQuery(lastYear);
        rangeQuery(lastYear);
        // 渲染
        laydate.render({
            elem: '#evaluationDate', //指定元素
            type: 'year',
            value: lastYear, // 设置默认值为上个月
            done: function (value, date, endDate) {
                performQuery(value); // 假设这是你的查询函数
                rangeQuery(value); // 假设这是你的查询函数
            }
        })

        //上、中部分
        function performQuery(date) {
            // 在这里实现查询逻辑，例如AJAX请求
            console.log('关键数据查询日期：' + date);
            // 这里可以添加实际的查询代码
            $.ajax({
                url: BASE_URL + 'getImportData',
                type: 'POST',
                data: {
                    year: date
                },
                dataType: 'json',
                success: function (response) {
                    var datas = response.data;
                    $("#countall").text(datas.countall + '项');
                    $("#percentall").text(datas.percentall + '%');
                    $("#countky").text(datas.countky);
                    $("#moneyky").text(datas.moneyky);
                    $("#countcs").text(datas.countcs);
                    $("#moneycs").text(datas.moneycs);
                    $("#countjs").text(datas.countjs);
                    $("#moneyjs").text(datas.moneyjs);

                    let kyList = datas.kyList;
                    let csList = datas.csList;
                    let jsList = datas.jsList;

                    let kyListStr = '';
                    for (var i = 0; i < kyList.length; i++) {
                        kyListStr += `
                            <div class="NewItemListbox">
								<div class="NewItemList">
									<div class="NewItemcolorBlock ColorBlock2"></div>
									<div class="NewItemTitle">${kyList[i].type}:</div>
									<div class="NewItemValue marLeft5"><span>${kyList[i].procount}</span> 项</div>
									<div class="NewItemValue marLeft10"><span>${kyList[i].totalmoney}</span> 亿元</div>
									<div class="NewItemBatch">批次：${kyList[i].batchcount}</div>
								</div>
							</div>
                        `
                    }
                    $("#kyList").html(kyListStr)

                    let csListStr = '';
                    for (var i = 0; i < csList.length; i++) {
                        csListStr += `
                            <div class="NewItemListbox">
								<div class="NewItemList">
									<div class="NewItemcolorBlock ColorBlock2"></div>
									<div class="NewItemTitle">${csList[i].type}:</div>
									<div class="NewItemValue marLeft5"><span>${csList[i].procount}</span> 项</div>
									<div class="NewItemValue marLeft10"><span>${csList[i].totalmoney}</span> 亿元</div>
									<div class="NewItemBatch">批次：${csList[i].batchcount}</div>
								</div>
							</div>
                        `
                    }
                    $("#csList").html(csListStr)

                    let jsListStr = '';
                    for (var i = 0; i < jsList.length; i++) {
                        jsListStr += `
                            <div class="NewItemListbox">
								<div class="NewItemList">
									<div class="NewItemcolorBlock ColorBlock2"></div>
									<div class="NewItemTitle">${jsList[i].type}:</div>
									<div class="NewItemValue marLeft5"><span>${jsList[i].procount}</span> 项</div>
									<div class="NewItemValue marLeft10"><span>${jsList[i].totalmoney}</span> 亿元</div>
									<div class="NewItemBatch">批次：${jsList[i].batchcount}</div>
								</div>
							</div>
                        `
                    }
                    $("#jsList").html(jsListStr)

                },
                error: function (xhr, status, error) {
                    console.error('Error:', error);
                }
            });
        }

        function rangeQuery(date) {
            // 在这里实现查询逻辑，例如AJAX请求
            console.log('关键数据查询日期：' + date);
            // 这里可以添加实际的查询代码
            $.ajax({
                url: BASE_URL + 'getRangeData',
                type: 'POST',
                data: {
                    year: date
                },
                dataType: 'json',
                success: function (response) {
                    var datas = response.data;

                    let kycompareList = datas.kycompareList;
                    let cscompareList = datas.cscompareList;
                    let jscompareList = datas.jscompareList;

                    let kycompareListStr = '';
                    for (var i = 0; i < kycompareList.length; i++) {
                        kycompareListStr += `
                                            <div class="NewAnalysis_li ColorBlock4">
                                                <div class="NewAnalysisbox">
                                                    <div class="NewAnalysisTitle">项目金额差异</div>
                                                    <div class="NewAnalysisValue">(${kycompareList[i].range})</div>
                                                </div>
                                                <div class="NewAnalysisValueUl">
                                                    <div class="NewAnalysisValueLi">基建：${kycompareList[i].jjcount}项</div>
                                                    <div class="NewAnalysisValueLi">业扩：${kycompareList[i].ykcount}项</div>
                                                    <div class="NewAnalysisValueLi">技改：${kycompareList[i].jgcount}项</div>
                                                    <div class="NewAnalysisValueLi">大修：${kycompareList[i].dxcount}项</div>
                                                </div>
                                            </div>
                        `
                    }
                    $("#kycompareList").html(kycompareListStr)

                    let cscompareListStr = '';
                    for (var i = 0; i < cscompareList.length; i++) {
                        cscompareListStr += `
                                            <div class="NewAnalysis_li ColorBlock5">
                                                <div class="NewAnalysisbox">
                                                    <div class="NewAnalysisTitle">项目金额差异</div>
                                                    <div class="NewAnalysisValue">(${cscompareList[i].range})</div>
                                                </div>
                                                <div class="NewAnalysisValueUl">
                                                    <div class="NewAnalysisValueLi">基建：${cscompareList[i].jjcount}项</div>
                                                    <div class="NewAnalysisValueLi">业扩：${cscompareList[i].ykcount}项</div>
                                                    <div class="NewAnalysisValueLi">技改：${cscompareList[i].jgcount}项</div>
                                                    <div class="NewAnalysisValueLi">大修：${cscompareList[i].dxcount}项</div>
                                                </div>
                                            </div>
                        `
                    }
                    $("#cscompareList").html(cscompareListStr)

                    let jscompareListStr = '';
                    for (var i = 0; i < jscompareList.length; i++) {
                        jscompareListStr += `
                                            <div class="NewAnalysis_li ColorBlock6">
                                                <div class="NewAnalysisbox">
                                                    <div class="NewAnalysisTitle">项目金额差异</div>
                                                    <div class="NewAnalysisValue">(${jscompareList[i].range})</div>
                                                </div>
                                                <div class="NewAnalysisValueUl">
                                                    <div class="NewAnalysisValueLi">基建：${jscompareList[i].jjcount}项</div>
                                                    <div class="NewAnalysisValueLi">业扩：${jscompareList[i].ykcount}项</div>
                                                    <div class="NewAnalysisValueLi">技改：${jscompareList[i].jgcount}项</div>
                                                    <div class="NewAnalysisValueLi">大修：${jscompareList[i].dxcount}项</div>
                                                </div>
                                            </div>
                        `
                    }
                    $("#jscompareList").html(jscompareListStr)

                },
                error: function (xhr, status, error) {
                    console.error('Error:', error);
                }
            });
        }
    });
</script>
</body>

</html>